<template>
  <div class="home-view">
    <!-- 头部 -->
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-header style="height: 60px; line-height: 60px; background-color: #409EFF; color: #fff; padding-left: 20px; display: flex; justify-content: space-between; align-items: center;">
        <span><i class="el-icon-house"></i> 熙心健康管理系统</span>
        <div style="display: flex; align-items: center;">
          <span style="margin-right: 20px;">系统管理员：{{ userName }}</span>
          <el-button type="danger" size="small" @click="logout">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px" style="background-color: #333; color: #fff;">
          <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect" background-color="#333" text-color="#fff" active-text-color="#409EFF">
            <el-menu-item index="1">
              <i class="el-icon-house"></i>
              <router-link to="/first">首页</router-link>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-date"></i>
              <router-link to="/emp">体检预约</router-link>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-s-order"></i>
              <router-link to="/dept">预约列表</router-link>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-search"></i>
              <router-link to="/find">体检客户查询</router-link>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 主内容区 -->
        <el-main style="padding: 20px;">
          <div class="appointment-list">
            <!-- 面包屑导航 -->
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>预约</el-breadcrumb-item>
              <el-breadcrumb-item>预约列表</el-breadcrumb-item>
            </el-breadcrumb>

            <!-- 查询条件表单 -->
            <el-card class="box-card">
              <h2>体检客户查询</h2>
              <el-form :model="queryForm" ref="queryFormRef" label-width="100px">
                <el-row :gutter="20">
                  <!-- 手机号 -->
                  <el-col :span="6">
                    <el-form-item label="手机号" prop="phoneNumber">
                      <el-input v-model="queryForm.phoneNumber" placeholder="输入搜索的手机号"></el-input>
                    </el-form-item>
                  </el-col>
                  <!-- 姓名 -->
                  <el-col :span="6">
                    <el-form-item label="姓名" prop="name">
                      <el-input v-model="queryForm.name" placeholder="输入预约体检的客户信息"></el-input>
                    </el-form-item>
                  </el-col>
                  <!-- 性别 -->
                  <el-col :span="6">
                    <el-form-item label="性别" prop="gender">
                      <el-select v-model="queryForm.gender" placeholder="选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                        <el-option label="不限" value=""></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 预约院区 -->
                  <el-col :span="6">
                    <el-form-item label="预约院区" prop="hospital">
                      <el-select v-model="queryForm.hospital" placeholder="选择院区地址">
                        <el-option
                          v-for="(item, index) in hospitalList"
                          :key="index"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <!-- 预约套餐 -->
                  <el-col :span="6">
                    <el-form-item label="套餐类型" prop="package">
                      <el-select v-model="queryForm.package" placeholder="选择套餐类型">
                        <el-option
                          v-for="(item, index) in packageList"
                          :key="index"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 体检时间 -->
                  <el-col :span="6">
                    <el-form-item label="体检时间" prop="examDate">
                      <el-date-picker
                        v-model="queryForm.examDate"
                        type="date"
                        placeholder="选择体检时间"
                        value-format="yyyy-MM-dd"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <!-- 是否归档 -->
                  <el-col :span="6">
                    <el-form-item label="是否归档" prop="archived">
                      <el-radio-group v-model="queryForm.archived">
                        <el-radio label="">不限</el-radio>
                        <el-radio label="未归档">未归档</el-radio>
                        <el-radio label="已归档">已归档</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- 查询按钮 -->
                <el-form-item>
                  <el-button type="primary" @click="fetchAppointments">查询</el-button>
                </el-form-item>
              </el-form>
            </el-card>

            <!-- 预约客户查询列表 -->
            <el-card class="box-card">
              <h2>预约客户查询列表</h2>
              <el-table :data="appointments" style="width: 100%">
                <el-table-column prop="orderId" label="订单编号" width="180"></el-table-column>
                <el-table-column prop="customerName" label="客户姓名" width="120"></el-table-column>
                <el-table-column prop="customerPhone" label="客户手机号" width="180"></el-table-column>
                <el-table-column prop="hospital" label="预约院区" width="220"></el-table-column>
                <el-table-column prop="package" label="预约套餐" width="220"></el-table-column>
                <el-table-column prop="examDate" label="预约时间" width="150"></el-table-column>
                <el-table-column prop="archived" label="是否归档" width="100"></el-table-column>
              </el-table>

              <!-- 分页 -->
              <div class="pagination">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="total"
                  :page-size="pageSize"
                  :current-page="currentPage"
                  @current-change="handlePageChange"
                ></el-pagination>
              </div>
            </el-card>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'AppointmentList',
  data() {
    return {
      userName: 'admin',
      activeIndex: '3', // 默认激活第三个菜单项（预约列表）
      // 查询表单
      queryForm: {
        phoneNumber: '',
        name: '',
        gender: '',
        hospital: '',
        package: '',
        examDate: '',
        archived: '',
      },
      // 院区列表
      hospitalList: [
        { id: 1, name: '浑南院区' },
        { id: 2, name: '市府广场院区' },
        { id: 3, name: '三好街院区' },
      ],
      // 套餐列表
      packageList: [
        { id: 1, name: '基础套餐' },
        { id: 2, name: '豪华套餐' },
        { id: 3, name: '至尊套餐' },
      ],
      // 预约列表数据
      appointments: [
        {
          orderId: '20231008990202120',
          customerName: '张一山',
          customerPhone: '13100000000',
          hospital: '浑南院区',
          package: '基础套餐',
          examDate: '2023-10-08',
          archived: '已归档',
        },
        // ... 其他数据
      ],
      // 分页信息
      total: 10, // 总记录数
      pageSize: 10, // 每页显示的记录数
      currentPage: 1, // 当前页码
    };
  },
  methods: {
    logout() {
      this.$message.success('退出成功！');
      this.$router.push('/login');
    },
    // 查询预约列表
    fetchAppointments() {
      // 模拟根据条件查询
      console.log('查询条件:', this.queryForm);
      // 根据条件筛选数据
      this.appointments = this.filterAppointments();

      // 更新总记录数
      this.total = this.appointments.length;

      // 重置当前页码
      this.currentPage = 1;
    },
    // 筛选预约数据
    filterAppointments() {
      return this.appointments.filter((appointment) => {
        const { phoneNumber, name, gender, hospital, package: pkg, examDate, archived } = this.queryForm;
        const { customerPhone, customerName, hospital: apHospital, package: apPackage, examDate: apExamDate, archived: apArchived } = appointment;

        // 筛选条件
        const matchesPhoneNumber = !phoneNumber || customerPhone.includes(phoneNumber);
        const matchesName = !name || customerName.includes(name);
        const matchesGender = !gender || gender === apArchived;
        const matchesHospital = !hospital || apHospital === hospital;
        const matchesPackage = !pkg || apPackage === pkg;
        const matchesExamDate = !examDate || apExamDate === examDate;
        const matchesArchived = !archived || apArchived === archived;

        return (
          matchesPhoneNumber &&
          matchesName &&
          matchesGender &&
          matchesHospital &&
          matchesPackage &&
          matchesExamDate &&
          matchesArchived
        );
      });
    },
    // 分页切换
    handlePageChange(page) {
      this.currentPage = page;
    },
    handleSelect(index) {
      this.activeIndex = index;
    },
  },
};
</script>

<style scoped>
.appointment-list {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.box-card h2 {
  margin: 0 0 20px 0;
  font-size: 24px;
  color: #333;
}

.el-header {
  background-color: #409EFF;
  color: #fff;
}

.el-aside {
  background-color: #333;
  color: #fff;
}

.el-main {
  background-color: #f0f2f5;
}

.el-menu {
  border-right: none;
}

.el-menu-item a {
  color: #fff;
  text-decoration: none;
}

.el-menu-item a:hover {
  color: #409EFF;
}

.el-menu-item.is-active a {
  color: #409EFF;
  font-weight: bold;
}

.el-menu-item.is-active {
  background-color: #4a4a4a;
}

.el-breadcrumb {
  margin-bottom: 20px;
}

.el-form-item__label {
  font-weight: bold;
}

.el-button {
  margin-top: 20px;
}

.el-input__inner {
  border-radius: 5px;
}

.el-select .el-input__inner {
  border-radius: 5px;
}

.el-date-editor.el-input__inner {
  border-radius: 5px;
}

/* 提交按钮样式 */
.el-button--primary {
  margin-right: 20px;
}

/* 清空按钮样式 */
.el-button--default {
  margin-left: 20px;
}

/* 表单输入框样式 */
.el-input {
  margin-bottom: 10px;
}

/* 表格样式 */
.el-table {
  margin-bottom: 20px;
}

/* 分页样式 */
.pagination {
  text-align: center;
  margin-top: 20px;
}
</style>
